<template>
  <div class="l-rygl-all">
    <div class="l-rygl">
      <!-- 人员管理头部 -->
      <div class="l-rygl-head">人员管理</div>
      <!-- 人员管理Tab标签 -->
      <div class="rygl-tab">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <!-- 人员管理搜索框 -->
          <!-- 搜索框外的div v-model -->
          <div class="sousuo-div" :model="formInline">
            <!-- 第一行搜索框 -->
            <div class="l-input1">
              <el-form :inline="true" class="demo-form-inline el-from">
                <el-form-item label="单位名称:">
                  <el-select v-model="formInline.company_id" placeholder="请选择">
                    <el-option
                      v-for="item in linputdan"
                      :key="item.company_id"
                      :label="item.company_name"
                      :value="item.company_id"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="单位类型:">
                  <el-select v-model="formInline.company_type_id" placeholder="请选择">
                    <el-option
                      v-for="item in linput1"
                      :key="item.company_type_id"
                      :label="item.company_type_name"
                      :value="item.company_type_id"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="职务类型:">
                  <el-select v-model="formInline.job_id" placeholder="请选择">
                    <el-option
                      v-for="item in linput2"
                      :key="item.job_id"
                      :label="item.job_name"
                      :value="item.job_id"
                    >
                      <!-- :label="item.id" -->
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="人员状态:">
                  <el-select v-model="formInline.people_status" placeholder="请选择">
                    <el-option
                      v-for="item in options1"
                      :key="item.label"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
            <!-- 第二行搜索框 -->
            <div class="l-input2">
              <div class="l-demo-form-inline el-from">
                <el-form :inline="true" class="demo-form-inline">
                  <el-form-item label="人员名称:">
                    <el-input v-model="formInline.people_name" class="padding" placeholder="人员名称"></el-input>
                  </el-form-item>
                </el-form>
              </div>
              <div class="block1">
                <span class="demonstration">入场时间:</span>
                <el-date-picker
                  v-model="formInline.people_started"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  type="date"
                  placeholder="选择日期"
                ></el-date-picker>
              </div>
              <div class="block2">
                <span class="demonstration">离场时间:</span>
                <el-date-picker
                  v-model="formInline.people_end"
                  format="yyyy-MM-dd "
                  value-format="yyyy-MM-dd"
                  type="date"
                  placeholder="选择日期"
                ></el-date-picker>
              </div>
            </div>
            <div class="rygl-btn">
              <div class="rygl-btn-left">
                <el-button type="primary" @click="search(formInline)">搜索</el-button>
                <el-button @click="reset(formInline)">重置</el-button>
              </div>
              <div class="rygl-btn-right">
                <el-button type="primary" @click="addrygl()">新增</el-button>
              </div>
            </div>
          </div>
          <!-- 表格 -->
          <div class="rygl-table">
            <el-tab-pane label="现场管理人员" name="first">
              <el-table
                :border="true"
                :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
                ref="multipleTable"
                :data="currList"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange"
              >
                <!-- <template slot-scope="scope"> -->
                <el-table-column @change="changekuang()" type="selection" width="55" align="center"></el-table-column>
                <!-- </template> -->
                <el-table-column
                  prop="buildCompany.company_name"
                  label="单位名称"
                  show-overflow-tooltip
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="buildCompany.buildCompanyType.company_type_name"
                  label="单位类型"
                  show-overflow-tooltip
                  align="center"
                ></el-table-column>-->
                <el-table-column prop="people_name" label="姓名" show-overflow-tooltip align="center"></el-table-column>-->
                <el-table-column prop="people_sex" label="性别" show-overflow-tooltip align="center">
                  <template slot-scope="scope">
                    <span v-text="scope.row.people_status==='0'?'女':'男'"></span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="buildJob.job_name"
                  label="职务"
                  show-overflow-tooltrip
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="people_started"
                  label="入场时间"
                  show-overflow-tooltip
                  align="center"
                ></el-table-column>
                <el-table-column prop="time" label="离场时间" show-overflow-tooltip align="center"></el-table-column>
                <el-table-column
                  prop="people_status"
                  label="人员状态"
                  show-overflow-tooltip
                  align="center"
                >
                  <template slot-scope="scope">
                    <span
                      class="el-icon-success"
                      style="color:green"
                      v-if="scope.row.people_status=='1'"
                    ></span>
                    <span
                      class="el-icon-remove"
                      style="color:yellow"
                      v-if="scope.row.people_status=='0'"
                    ></span>
                    <span
                      class="el-icon-error"
                      style="color:red"
                      v-if="scope.row.people_status=='2'"
                    ></span>
                    <!-- <span class="el-icon-error" style="color:red" v-else></span> -->
                  </template>
                  <!-- <template slot-scope="scope"> -->
                  <!-- <span v-if="scope.row.people_status==="></span> -->
                  <!-- <span v-text="scope.row.admin_lastloginstate=='0'?'PC端':'APP端'"></span>
               <span v-text="scope.row.admin_lastloginstate=='0'?'PC端':'APP端'"></span>
                  <span v-text="scope.row.admin_lastloginstate=='0'?'PC端':'APP端'"></span>-->
                  <!-- </template> -->
                </el-table-column>
                <el-table-column label="操作" width="200px" align="center">
                  <template slot-scope="scope">
                    <el-button
                      type="text"
                      @click="edit(scope.$index, scope.row)"
                      style="width: 50px"
                    >
                      <span class="btn-zi">编辑</span>
                    </el-button>
                    <el-button
                      type="text"
                      @click="shanchu(scope.$index, scope.row)"
                      style="width: 50px"
                    >删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <!-- 分页 -->
            </el-tab-pane>
          </div>
        </el-tabs>
      </div>
    </div>
    <div class="f-fenye">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="tableData.length"
        :page-size="pageSize"
        @current-change="changePage"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import http from "../api";
export default {
  data() {
    return {
      options1: [
        {
          value: 0,
          label: "待入场",
        },
        {
          value: 1,
          label: "入场",
        },
        {
          value: 2,
          label: "离场",
        },
      ],
      linputdan: [], //单位名称
      linput1: [], //单位名称  单位类型
      linput2: [], //职务类型
      tablecheck: false,
      editarr: {}, //编辑
      tableData: [], //总条数
      currPage: 1, //当前页
      currList: [], //当前展示的数据数组
      pageSize: 5,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      activeName: "first",

      formInline: {
        company_id: "", //单位名称id
        company_type_id: "", //单位类型id
        job_name: "", //职务类型
        people_status: "", //人员状态
        people_name: "", //人员名称
        people_started: "", //入场时间
        people_end: "", //离场时间
      },

      // ruleFrom:{
      //  company_id:this.formInline.company_name
      // },

      kuangarr: [],
      // multipleSelection: [],
    };
  },
  methods: {
    // 搜索按钮
    search(formInline) {
      console.log(formInline);
      //   http.rygl(formInline).then((res) => {
      //     // this.tableData=res;
      //   console.log('222',res);
      //   // this.setCurrList(1);
      // });
      let searchForm = {};
      let buildCompany = {};
      let buildJob = {};
      buildCompany.company_type_id = formInline.company_type_id;
      buildJob.job_id = formInline.job_id;
      searchForm.company_id = formInline.company_id;
      searchForm.buildJob = buildJob;
      searchForm.buildCompany = buildCompany;
      searchForm.people_status = formInline.people_status;
      searchForm.people_name = formInline.people_name;
      searchForm.people_started = formInline.people_started;
      searchForm.people_end = formInline.people_end;
      console.log("搜索数据", searchForm);
      http.search(searchForm).then((res) => {
        console.log("搜索", res.data);
        this.tableData = res.data;
        this.setCurrList(1);
      });
    },
    //重置按钮
    reset(formInline) {
      // formInline.name='';
      for (let key in formInline) {
        formInline[key] = "";
      }
      // formInline={}
      // console.log(formInline)
    },
    //新增按钮
    addrygl() {
      this.$router.push({
        name: "人员管理新增",
      });
    },
    // change
    changekuang(index, row) {
      console.log(index);
    },
    // 改变当前页改变当前页展示
    setCurrList(index) {
      this.currList = this.tableData.slice(
        (index - 1) * this.pageSize,
        index * this.pageSize
      );
    },
    // 改变当前页
    changePage(val) {
      this.currPage = val;
      this.setCurrList(val);

      console.log(val);
    },
    // 编辑按钮
    edit(index, row) {
      //  this.editarr = JSON.parse(JSON.stringify(row));
      // console.log(this.editarr);
      this.$router.push({
        name: "编辑页面",
        params: row,
      });
    },

    handleClick(tab, event) {
      console.log(tab, event);
    },
    // 删除
    shanchu(index, row) {
      console.log("单个删除", row.people_id);
      let shanobj = {};
      let shanobjarr = [];
      shanobjarr.push(row.people_id);
      shanobj.peopleIdList = shanobjarr;
      console.log("单个删除obj", shanobj);
      http.shanchu(shanobj).then((res) => {
        console.log("单个删除1", res.data);
        http.rygl({}).then((res) => {
          this.tableData = res.data;
          console.log("表格", res.data);
          this.setCurrList(this.currPage);
        });
        // this.linput2 = res.data;
      });
    },
    del(cur) {
      console.log(this.currPage.length);
      for (let i = 0; i < this.kuangarr.length; i++) {
        this.tableData.splice(this.tableData.indexOf(this.kuangarr[i]), 1);
        //  console.log(this.tableData.indexOf(this.kuangarr[i]));
      }
    },
    handleSelectionChange(val) {
      this.kuangarr = val;
      console.log(val);
      //  console.log(this.kuangarr.length);
    },
  },
  mounted() {
    // 权限 http.goit
    http.qita({}).then((r) => {
      if (r.code == 2) {
        alert("权限不足");
        this.$router.push({
          name: "控制台",
        });
      } else {
        console.log(r);
        this.tableData = r.data;
        this.setCurrList(1);
      }
    });
    http.input1({}).then((res) => {
      this.linputdan = res.data;
      console.log("单位名称接口", res.data);
    });
    http.rygl({}).then((res) => {
      this.tableData = res.data;
      console.log("表格", res.data);
      this.setCurrList(1);
    });
    http.getBuildCompanyTypes({}).then((res) => {
      console.log("单位", res.data);
      this.linput1 = res.data; //单位类型
    });
    http.input2({}).then((res) => {
      this.linput2 = res.data; //职务类型
      console.log("职务类型", res.data);
    });
  },
};
</script>
<style scoped>
.rygl-tab {
}
.l-rygl-all {
  margin-top: 15px;
  width: 100%;
  /* height: 500px; */
  height: 640px;
  position: relative;

  /* background-color: tomato; */
  background-color: white;
  overflow-y: scroll;
  /* overflow-x: hidden; */
}
.rygl-table {
  width: 98%;
  margin: 0 auto;
}
.l-rygl {
  background-color: white;
  margin-left: 30px;
  width: 98%;
  /* overflow: hidden; */
  /* height: 500px; */
  /* background:red; */
}
.l-rygl-head {
  margin-top: 20px;
  font-size: 17px;
  color: #222;
  font-weight: 700;
}
.rygl-tab {
  width: 98%;
  /* margin: 0 auto; */
  margin-top: 15px;
}

/* input标题 */
.el-from >>> .el-form-item__label {
  padding: 0 10px 0 0;
}
.el-input >>> .el-input__inner {
  width: 178px;
  height: 30px;
  /* padding-left: 5px; */
  /* margin-left: 5px; */
}
.padding >>> .el-input__inner {
  width: 178px;
  height: 30px;
  padding-left: 5px !important;
}
.el-select >>> .el-input__inner {
  width: 178px;
  height: 30px;
  padding-left: 5px;
  /* margin-left: 5px; */
}
.el-input >>> .el-input__icon {
  line-height: 30px;
}
/* 日期叉叉 */
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 185px;
}
.block1 {
  margin-left: 5px;
  height: 40px;
  display: inline-block;
}
.block2 {
  height: 40px;
  display: inline-block;
  margin-left: 10px;
}
.demonstration {
  margin-right: 5px;
}
.l-demo-form-inline {
  display: inline-block;
}
.demo-form-inline {
  height: 45px;
}
.l-input2 {
  display: flex;
  align-items: center;
  margin-top: 10px;
}
.rygl-btn {
  width: 100%;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}
.el-button {
  height: 32px;
  padding: 8px 15px;
}
.tltab {
  /* height: 390px;
  overflow: scroll; */
  margin-top: 10px;
}

/* 按钮里的字 */
.btn-zi {
  font-size: 14px;
}
.el-tab-pane {
  margin-top: 20px;
}
.f-fenye {
  /* float: right; */
  position: absolute;
  bottom: 0;
  right: 2%;
  margin-top: 15px;
}
.rygl-btn-right {
  /* margin-right: 15px; */
}
.rygl-table {
  width: 100%;
  margin: 0 auto;
}
/* .has-gutter{
  height: 30px;
} */
/* ::-webkit-scrollbar {
  width: 8px;
  height: 10px;
  background-color: rgb(214, 214, 214);
} */
/* ::-webkit-scrollbar-track {
  box-shadow: inset 0 0 0px rgba(240, 240, 240, .5);
  border-radius: 10px;
  background-color: rgba(240, 240, 240, .5);
} */
/* ::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 0px rgba(240, 240, 240, .5);
  background-color: rgba(240, 240, 240, .5);
} */
</style>